<!doctype html>
<html>
<head>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="../images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="../images/apple-touch-icon.png">
	<title>tree</title>
	<link rel="stylesheet" href="../scripts/lib/seedsui/seedsui.min.css">
</head>

<body ontouchstart="">
	<header>
	    <div class="titlebar">
	    	<a class="titlebar-button" href="javascript:back()">
	            <i class="icon icon-arrowleft"></i>
	        </a>
	        <h1 class="titlebar-title">树结构</h1>
	    </div>
	</header>
	<article style="padding-top:52px;">
		<!-- tree bar -->
        <div class="tree-bar" id="ID-Tree-Bar"></div>
        <!-- tree -->
        <div class="tree-box" id="ID-Tree-Box">
            <ul class="tree" id="ID-Tree-List"></ul>
        </div>
	</article>
    <script src="../scripts/lib/jquery/jquery.min.js"></script>
	<!--SeedsUI-->
    <script src="../scripts/lib/seedsui/seedsui.min.js"></script>
	<script>
	    var app={
            loading:{},
            nodataHTML:'<div>没有数据</div>'
        }
        var view={
            /*=========================
              Model
              ===========================*/
            render:function(){
                var self = this;
                //渲染页面
                
                //提示框
                this.toast=new Toast("");
                //列表
                this.listContainer=document.getElementById("ID-Tree-Box");
                //初始化树结构
                this._initTree();
                //加载群组
                this.loadGroup();
            },
            refresh:function(selected){
                console.log("树搜索页：刷新");
                //添加树结构选中项
                this._selectedTree(selected);
                if(!this.groupData){
                    //加载群组
                    this.loadGroup();
                }
            },
            destroy:function(){
                console.log("树搜索页：移除");
            },
            loadGroup:function(){
                var self=this;
                app.loading.show();
                $.ajax({
                    url: "../scripts/dummydata/group.json",
                    success:function(data){
                        //格式化数据字段为:id、name、parentId
                        var data=data.replace(/depUuid/mgi,"id").replace(/depName/mgi,"name").replace(/parentId/mgi,"parentid");
                        self.groupData=JSON.parse(data).depList;
                        //没有数据
                        if(self.groupData.length<=0){
                            self.listContainer[0].innerHTML=app.nodataHTML;
                            return;
                        }
                        //渲染
                        self.tree.setData(self.groupData);
                        self.tree.update();
                    },
                    error:function(msg){
                        self.listContainer[0].innerHTML=app.errorHTML;
                    },
                    complete:function(){
                        setTimeout(function(){
                            app.loading.hide();
                        }, 300);
                    }
                });
            },
            loadPeople:function(e,url){
                var id=e.targetLine.getAttribute("data-id");
                var ul=e.targetLine.nextElementSibling;
                app.loading.show();
                var self=this;
                $.ajax({
                    url: url,
                    success:function(data){
                        var data=data.replace(/userUuid/mgi,"id").replace(/deptUuid/mgi,"parentid").replace(/userName/mgi,"name");
                        var userData=JSON.parse(data).userList;
                        //没有数据
                        if(userData.length<=0){
                            self.toast.setText("没有数据");
                            self.toast.show();
                            return;
                        }
                        //渲染
                        self.tree.addData(userData,id,ul);
                        e.targetLine.hasData=true;
                    },
                    fail:function(msg){
                        self.toast.setText("加载数据失败");
                        self.toast.show();
                    },
                    complete:function(){
                        setTimeout(function(){
                            app.loading.hide();
                        }, 300);
                    }
                });
            },
            /*=========================
              Method
              ===========================*/
            _initTree:function(){
                var self=this;
                this.tree=new Tree("#ID-Tree-List",{
                    onData:function(option){
                        if(option.loginId){
                            var photo="";
                            if(option.avatarUrl){
                                photo='<span class="tree-photo" style="background-image:url('+option.avatarUrl+')"></span>';
                            }else{
                                photo='<span class="tree-photo" style="background-color:'+option.name.substr(0,1).toPinyin().substr(0,1).toColor()+'">'+option.name.substr(option.name.length-2,2)+'</span>';
                            }
                            option.html='<div class="tree-icon">'+photo+'</div>'+
                            '<div class="tree-title">'+option.name+'</div>';
                        }
                    },
                    onClick:function(e){
                        /*console.log("点击行："+e.targetLine);
                        console.log("点击元素："+e.target);
                        console.log("点击的li："+e.targetLi);*/
                        if(e.targetLine.hasData){
                            return;
                        }
                        var id=e.targetLine.getAttribute("data-id");
                        if(id==="56a81fea-03f4-41e1-a521-ea14513a65c6"){//业务产品部
                            var url="../scripts/dummydata/userList1.json";
                            self.loadPeople(e,url);
                        }
                        if(id==="96a2835b-a1b2-4556-bf68-cb0038042b57"){//移动平台产品线
                            var url="../scripts/dummydata/userList2.json";
                            self.loadPeople(e,url);
                        }
                    },
                    onClickLastChild:function(e){//没有子节点
                        console.log("没有子节点");
                    }
                });
            }
        }

        window.addEventListener("load",function(){
            app.loading=new Loading();
            view.render();
        }, false);
	//定义exmobi返回
	function back(){history.go(-1);}
	</script>
</body>
</html>